<nz-page-header class="site-page-header" nzTitle="基础详情页" nzCotent>
  <nz-breadcrumb nz-page-header-breadcrumb>
    <nz-breadcrumb-item>
      <a [routerLink]="'/home'">首页</a>
    </nz-breadcrumb-item>
    <nz-breadcrumb-item>详情页</nz-breadcrumb-item>
    <nz-breadcrumb-item>基础详情页</nz-breadcrumb-item>
  </nz-breadcrumb>
</nz-page-header>
<div class="content-section">
  <app-watermark></app-watermark>
  <nz-card>
    <nz-descriptions nzTitle="退款申请">
      <nz-descriptions-item nzTitle="取货单号">1000000000</nz-descriptions-item>
      <nz-descriptions-item nzTitle="状态">已取货</nz-descriptions-item>
      <nz-descriptions-item nzTitle="销售单号">1234123421</nz-descriptions-item>
      <nz-descriptions-item nzTitle="子订单">3214321432</nz-descriptions-item>
    </nz-descriptions>
    <nz-divider></nz-divider>
    <nz-descriptions nzTitle="用户信息">
      <nz-descriptions-item nzTitle="用户姓名">付小小</nz-descriptions-item>
      <nz-descriptions-item nzTitle="联系电话">18100000000</nz-descriptions-item>
      <nz-descriptions-item nzTitle="常用快递">菜鸟仓储</nz-descriptions-item>
      <nz-descriptions-item nzTitle="取货地址">浙江省杭州市西湖区万塘路18号</nz-descriptions-item>
      <nz-descriptions-item nzTitle="备注">无</nz-descriptions-item>
    </nz-descriptions>
    <nz-divider></nz-divider>
    <div class="title">退货商品</div>
    <nz-table #basicTable [nzData]="listOfGood" [nzShowPagination]="false" [nzLoading]="isSpinningGood">
      <thead>
        <tr>
          <th>商品编号</th>
          <th>商品名称</th>
          <th>商品条码</th>
          <th [nzAlign]="'right'">单价</th>
          <th [nzAlign]="'right'">数量（件）</th>
          <th [nzAlign]="'right'">金额</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of basicTable.data">
          <td><a>{{ data.id }}</a></td>
          <td>{{ data.name }}</td>
          <td>{{ data.barcode }}</td>
          <td [nzAlign]="'right'">{{ data.price }}</td>
          <td [nzAlign]="'right'">{{ data.num }}</td>
          <td [nzAlign]="'right'">{{ data.amount }}</td>
        </tr>
        <tr>
          <td><strong>总计</strong></td>
          <td></td>
          <td></td>
          <td [nzAlign]="'right'"></td>
          <td [nzAlign]="'right'"><strong>{{goodInfo.total_num}}</strong></td>
          <td [nzAlign]="'right'"><strong>{{goodInfo.total_amount | number:'.2'}}</strong></td>
        </tr>
      </tbody>
    </nz-table>
    <div class="title mt20">退货进度</div>
    <nz-table #progressTable [nzData]="listOfProgress" [nzShowPagination]="false" [nzLoading]="isSpinningProgress">
      <thead>
        <tr>
          <th>时间</th>
          <th>当前进度</th>
          <th>状态</th>
          <th>操作员ID</th>
          <th>耗时</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of progressTable.data">
          <td>{{ data.time }}</td>
          <td>{{ data.rate }}</td>
          <td>
            <ng-container [ngSwitch]="data.status">
              <nz-badge *ngSwitchCase="'success'" nzStatus="success" nzText="成功"></nz-badge>
              <nz-badge *ngSwitchCase="'processing'" nzStatus="processing" nzText="进行中"></nz-badge>
            </ng-container>
          </td>
          <td>{{ data.operator }}</td>
          <td>{{ data.cost }}</td>
        </tr>
      </tbody>
    </nz-table>
  </nz-card>
</div>
